import React from 'react'
import { actions } from 'mirrorx'
import { API } from '../../api'
// import {FormattedMessage} from 'react-intl'
class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      detail: {},
      showTK: false,
      hideModelTitle: '',
      hideModelContent: ''
    }
    this.surrender = this.surrender.bind(this)
    this.orderNo = T.urlQuery('orderNo')
    this.policyState = T.urlQuery('state') || '1'
    this.goodsName = T.urlQuery('goodsName')
    this.Lang = window.LangMessage || {}
  }
  componentDidMount () {
    T.fetch2({
      url: API.oderDetail.path,
      data: {
        onlyLocal: (this.policyState === '3') ? 'yes' : 'no',
        orderNo: this.orderNo
      }
    }).then((res) => {
      if (res.success) {
        this.setState({
          detail: res.data
        })
      }
    })
    T.sessionStorage.remove('infoValues')
  }

  // 退保 方法
  surrender () {
    actions.routing.push({
      pathname: 'surrender-compose',
      search: '?policyNo=' + this.state.detail.policyNo + '&orderNo=' + this.orderNo
    })
  }

  // 理赔 方法
  claim () {
    actions.routing.push({
      pathname: '/poc-claim',
      search: '?policyNo=' + this.state.detail.policyNo
    })
  }

  renderButton (state) {
    let html
    if (state === '1') {
      html = (
        <div className=' surrender-footer tac f30 fcw' style={{ height: '1.1rem' }} >
          <div className='fl bgfw fc3' onClick={this.surrender}><span>{ this.Lang.surrender || 'Surrender'}</span></div>
          <div className='fr  diy_background' onClick={this.claim.bind(this)}><span>Claim</span></div>
        </div>)
    } else if (state === '2') {
      html = ''
    } else if (state === '3') {
      html = (<div className='footer diy_background tac f30 fcw pt30' onClick={() => { window.location.href = '/pay-yj-en?orderNo=' + this.orderNo + '&productName=' + (this.goodsName || this.state.detail.goodsName) }}><span>{ this.Lang.pay_now || '立即支付' }</span></div>)
    }
    return html
  }

  render () {
    const policyState = {
      '1': this.Lang.valid || 'valid',
      '2': this.Lang.uneffective || 'invalid',
      '3': this.Lang.dealing || 'processing'
    }
    const { detail } = this.state
    return (<div className='policy-detail-yj-page pb20'>
      <div className='general'>
        <div className='left'>
          <div className='name f36'>{this.goodsName || detail.goodsName}</div>
          <div className='detail'>
            <div className='detail-item'>{detail.insurer}</div>
            {this.policyState !== '3' && (<div>
              <div className='detail-item'>{(this.Lang.policyNo || 'Policy No') + ':'} {detail.policyNo}</div>
              <div className='detail-item'>Guarantee period: {detail.insuredStartDate}-{detail.insuredEndDate}</div>
            </div>)}
          </div>
        </div>
        <div className='right'>
          <img src='/assets/images/title-yj.png' alt='' className='img' />
        </div>
      </div>
      <ul className='list'>
        <li className='item clearfix f32'>
          <span className='fl'>{this.Lang.insurant || 'Insurant'}</span>
          <span className='fr'>{detail.insurant && detail.insurant.name}</span>
        </li>
        <li className='item clearfix f32'>
          <span className='fl'>{this.Lang.policy_fee || 'Insured Amount'}</span>
          <span className='fr high-light'>{T.formatPrice(T.cutPrice(detail.amount))} SGD</span>
        </li>
        <li className='item clearfix f32'>
          <span className='fl'>{'Status'}</span>
          <span className='fr'>{policyState[this.policyState]}</span>
        </li>
        {this.policyState !== '3' && (
          <li className='item clearfix f32'>
            <span className='fl'>{ this.Lang.coverage_period || 'Insured period'}</span>
            <span className='fr'>{detail.insuredStartDate} - {detail.insuredEndDate}</span>
          </li>
        )}
      </ul>
      <div className='check-for f24'>
        {this.Lang.yj_check || 'Please refer to' || 'をご参照ください。' }
        <a className='diy_color'>《{ this.Lang.policy_items || 'Insurance provision'}》</a> & <a className='diy_color'>《{ this.Lang.insure_must_know || 'Service protocol'}》</a>

      </div>
      {this.renderButton(this.policyState)}
    </div>)
  }
}

export default App
